<script setup lang="ts">
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';
import { getCircleData } from '@/api/Assist';
import { useCesiumPoints } from '@/hooks/useCesiumPoints';

const { addPoint, loadPipeline, clearAllPoints } = useCesiumPoints();
const dataSource = ref([]);
const currentPipelineType = ref(''); //当前管线类型
const entityRefs = ref({}); //保存线实体方便删除
const { resourcesTreeData, searchValue, warningInfo, sliderValue } = storeToRefs(useAssistStore());
const queryParams = computed(() => {
  return {
    lat: warningInfo.value.latitude,
    lon: warningInfo.value.longitude,
    radius: sliderValue.value / 1000,
    serCode: undefined
  };
});
const treeFlag = ref(true);
const { getResourcesTreeHandle } = useAssistStore();
const openTree = () => {
  treeFlag.value = !treeFlag.value;
};
const searchTreeHandler = () => {
  getResourcesTreeHandle();
};
//获取管线数据
const getCircleDataHandle = async () => {
  try {
    const { data } = await getCircleData(queryParams.value);
    if (entityRefs.value[currentPipelineType.value]) {
      clearAllPoints(entityRefs.value[currentPipelineType.value]);
      delete entityRefs.value[currentPipelineType.value];
      return;
    }
    entityRefs.value[currentPipelineType.value] = data[0]?.content.map((line) => loadPipeline(line, currentPipelineType.value));
  } catch (error) {
    console.warn(error, '获取数据失败');
  }
};
const checkHandler = (node) => {
  // 处理当前节点
  if (node.classify === 'line') {
    console.log('代表是管线', node);
    if (!node.children) {
      queryParams.value.serCode = node.data.sourceCode;
      currentPipelineType.value = node.label;
      getCircleDataHandle();
    }
  } else if (node.classify === 'point') {
    const point = node.data;
    if (point.longitude && point.latitude) {
      if (clearPoint(point)) return;
      dataSource.value.push(addPoint(point, point.type, '资源树'));
    }
  }

  // 如果有子节点，递归处理每个子节点
  if (node.children && node.children.length > 0) {
    node.children.forEach((child) => checkHandler(child));
  }
};
//判断点位是否已经存在 如果存在则删除点位
const clearPoint = (point) => {
  let flag = false;
  dataSource.value.forEach((item, index) => {
    const { moduleId } = JSON.parse(item.description.getValue());
    if (moduleId === point.id) {
      clearAllPoints([item]);
      dataSource.value.splice(index, 1);
      flag = true;
    }
  });
  return flag;
};
</script>

<template>
  <transition name="el-fade-in-linear">
    <div class="assistant-tree" v-if="!treeFlag" style="background-color: transparent; border: none; box-shadow: none">
      <div class="shouqi-zhankai-box">
        <img src="@/assets/largescreen/tree-zhankai.png" alt="" @click="openTree" />
      </div>
    </div>
  </transition>
  <transition name="el-fade-in-linear">
    <div class="assistant-tree" v-if="treeFlag">
      <div class="shouqi-zhankai-box">
        <img src="@/assets/largescreen/tree-shouqi.png" alt="" @click="openTree" />
      </div>
      <el-scrollbar max-height="400">
        <el-input placeholder="请输入关键词" v-model="searchValue" style="margin-bottom: 10px" @keyup.enter="searchTreeHandler" v-show="treeFlag">
          <template #prefix>
            <el-icon class="el-input__icon" @click="searchTreeHandler">
              <search />
            </el-icon>
          </template>
        </el-input>
        <el-tree :data="resourcesTreeData" :show-checkbox="true" @check="checkHandler" node-key="id" v-show="treeFlag"></el-tree>
      </el-scrollbar>
    </div>
  </transition>
</template>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  box-shadow: inset 0 0 0.625rem 0 #045bbd;
  background-color: #003895;
  border: 0.0625rem solid #045bbd;
  height: 2.1875rem;
  line-height: 2.1875rem;
  color: #fff;
}

:deep(.el-input__inner) {
  color: white;
}

.assistant-tree {
  padding: 10px 10px;
  box-sizing: border-box;
  z-index: 9;
  position: absolute;
  left: 28%;
  top: 11%;
  color: #fff;
  background-color: rgba($color: #004068, $alpha: 0.6);
  width: 240px;
  max-height: 81.7%;
  border: 2px solid #045bbd;
  box-shadow: inset 0px 0px 25px 0px #1b5bfb;

  .shouqi-zhankai-box {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 8px;

    img {
      cursor: pointer;
      width: 32px;
      height: 32px;
    }
  }

  :deep(.el-tree) {
    background-color: transparent;
  }

  :deep(.el-tree__empty-text) {
    font-size: 16px;
    color: #00f5ff;
  }

  :deep(.el-tree-node__expand-icon) {
    color: #00ffff;
    font-size: 16px;
  }

  :deep(.el-tree-node__expand-icon.is-leaf) {
    color: transparent;
    cursor: default;
  }

  :deep(.el-checkbox__inner) {
    border-radius: 0 0 0 0;
    opacity: 1;
    background: transparent;
    border: 1px solid #00ffff;
  }

  :deep(.el-tree-node > .el-tree-node__content) {
    height: 33px;
    background-color: transparent;
  }

  :deep(.el-tree-node > .el-tree-node__content:hover) {
    background-color: transparent;
  }

  :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
    background-color: transparent;
  }

  :deep(.el-tree-node__label) {
    margin-left: 9px;
    color: #0be4f1;
  }
}
</style>
